import { useState, useEffect } from 'react';

export const useRequestTiming = (fetchFn) => {
  const [data, setData] = useState(null);
  const [timing, setTiming] = useState({
    requestStart: 0,
    responseEnd: 0,
    renderEnd: 0,
    total: 0,
  });

  useEffect(() => {
    const startTime = performance.now();

    fetchFn().then((response) => {
      const responseEnd = performance.now();
      setData(response);

      /*
                事件循环基本流程 ：

                - 执行同步代码
                - 清空微任务队列（Promise等）
                - 执行渲染（如果需要）
                - 从宏任务队列取出一个任务执行
                */
      // 使用setTimeout确保在渲染完成后计算
      setTimeout(() => {
        const renderEnd = performance.now();
        setTiming({
          requestStart: startTime,
          responseEnd,
          renderEnd,
          total: renderEnd - startTime,
        });
      }, 0);
    });
  }, [fetchFn]);

  return { data, timing };
};
